<template>
  <div class="rk-bg">
    <div class="rk-header">
      <search v-if="[9,10].includes(queryType)" @result-click="resultClick" @on-change="getResult" @on-submit="onSubmit" class="xkzy-search" :results="results" :placeholder="searchPlaceholder" position="absolute" auto-scroll-to-top ref="search" v-model="keyWord" @on-cancel="onCancel" @on-clear="onCancel"></search>
      <search v-else @on-submit="onSubmit" :placeholder="searchPlaceholder" ref="search" :auto-fixed="false" v-model="keyWord" @on-cancel="onCancel" @on-clear="onCancel"></search>
      <div class="rk-filter clearfix">
        <div class="rkh-item" @click="changeFilter(1, districtResult, districtIds)"> 地区 <i class="iconfont icon-jiantouxia"></i></div>
        <div class="rkh-item" v-if="[1,2,3,4,5,9,10].includes(queryType)" @click="changeFilter(2, levelResult, levelIds)"> 级别 <i class="iconfont icon-jiantouxia"></i></div>
        <div class="rkh-item" @click="changeFilter(3, departmentResult, departmentIds)"> 部门 <i class="iconfont icon-jiantouxia"></i></div>
      </div>
    </div>
    <popup-filter title="选择级别" ref="popupFilter" @onClickRight="checkDone"></popup-filter>
    <div class="rk-cont">
      <!-- <loading-more v-if="loading && schoolData.length < 1"></loading-more> -->
      <div class="rk-null" v-if="!loading && schoolData.length < 1">没有找到符合您筛选条件的学校<br />请仔细检查您的筛选条件，重新搜索查询</div>
      <ul class="rk-list" v-else-if="queryType == 1">
        <li v-for="(item, idx) in schoolData" :key="idx" @click="routerLink(item.colleges.site)">
          <div class="rk-block">
            <div>{{interceptName(item.colleges.collegesName)}}</div>
            <div class="rk-right">{{provinceCity(item.colleges.province, item.colleges.city)}}</div>
          </div>
          <div class="rk-block rk-block2">
            <div class="rk-type" v-html="htmlToRankType(item.colleges)"></div>
            <div class="rk-right">{{item.colleges.department}}</div>
          </div>
        </li>
      </ul>
      <ul class="rk-list" v-else-if="[9,10].includes(queryType)">
        <li v-for="(item, idx) in schoolData" :key="idx">
          <div class="rk-block">
            <div class="ib mr10 rk-estimate"><span>{{item.rank}}</span>{{item.estimate}}</div>
            <div class="ib">{{interceptName(item.universityName)}}</div>
            <div class="rk-right">{{provinceCity(item && item.provinces ? item.provinces : item.province, item.city)}}</div>
          </div>
          <div class="rk-block rk-block2">
            <div class="ib mr10">{{item.professional}}</div>
            <div class="ib rk-type" v-html="htmlToRankType(item)"></div>
            <div class="rk-right">{{item.department}}</div>
          </div>
        </li>
      </ul>
      <ul class="rk-list" v-else>
        <li v-for="(item, idx) in schoolData" :key="idx" class="rk-order">
          <div class="rk-num rk-top" v-if="idx < 3"></div>
          <div class="rk-num" v-else>{{ idx + 1 }}</div>
          <div class="rk-item">
            <div class="rk-block">
              <div>{{interceptName(item.universityName)}}</div>
              <div class="rk-right">{{provinceCity(item && item.provinces ? item.provinces : item.province, item.city)}}</div>
            </div>
            <div class="rk-block rk-block2">
              <div class="rk-type" v-html="htmlToRankType(item)"></div>
              <div class="rk-right">{{item.department}}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Search } from 'vux'
import loadingMore from '@/components/loadingMore'
import popupFilter from '@/components/popupFilter'
import rankingMixin from './js/rankingMixin'
export default {
  name: 'rankingDetail',
  components: {
    Search,
    loadingMore,
    popupFilter
  },
  mixins: [rankingMixin],
  data() {
    return {
      queryType: 1
    }
  },
  created() {
    this.loading = true
    this.queryType = parseInt(this.$route.params.id) || 1;
    this.getInitData(parseInt(this.queryType))
  }
}
</script>

<style lang="scss">
.xkzy-search {
  .vux-search_show {
    height: 100% !important;
    .weui-cell:last-child {
      margin-bottom: 0 !important;
    }
  }
}
</style>

<style lang="scss" scoped>
@import "@/assets/css/common/_vars.scss";
.rk-header {
  border-bottom: 0.213333rem solid #f2f2f2;
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: #fff;
  .rk-filter {
    padding: 0 0.4rem;
    box-sizing: border-box;
    display: flex;
    .rkh-item {
      flex: 1;
      text-align: center;
      font-size: 14px;
      padding: 0.266667rem 0;
      position: relative;
      &:after {
        content: "";
        width: 1px;
        height: 80%;
        top: 10%;
        right: 0;
        background-color: #ccc;
        position: absolute;
      }
      &:last-child:after {
        display: none;
      }
    }
  }
}
.rk-cont {
  padding-top: 2.636667rem;
  li {
    border-bottom: 1px solid #ccc;
    padding: 0.213333rem 0.4rem;
    font-size: 14px;
    &.rk-order {
      position: relative;
      padding-left: 1.013333rem;
    }

    &:nth-child(1) .rk-top {
      background-image: url("/static/images/medal1.png");
    }
    &:nth-child(2) .rk-top {
      background-image: url("/static/images/medal2.png");
    }
    &:nth-child(3) .rk-top {
      background-image: url("/static/images/medal3.png");
    }
    .rk-top {
      width: 0.8rem;
      height: 1.12rem;
      background: no-repeat center;
      background-size: contain;
    }
    .rk-num {
      position: absolute;
      left: 0.16rem;
      top: 0.266667rem;
      width: 0.8rem;
      text-align: center;
      font-size: 18px;
      line-height: 1.12rem;
      color: $light-blue;
    }

    .rk-block {
      position: relative;
      .rk-right {
        position: absolute;
        right: 0;
        top: 0;
      }
      .rk-estimate {
        font-size: 0.533333rem;
        color: $light-blue;
      }
    }
    .rk-block2 {
      margin-top: 0.133333rem;
    }
  }
  .rk-null {
    width: 90%;
    margin: 1.333333rem auto 0;
    font-size: 0.373333rem;
    text-align: center;
    line-height: 0.693333rem;
  }
}
</style>

